<template>
	<view class="padding-25">
		<PageHead></PageHead>
		<view class="fs-white">
			<Acard bgFilter>
				<view class="fs-30">
					<view class="fs-60 fs-strong mb-15">{{ displayActivity.title }}</view>
					<view class="fs-30 mb-5">
						开始日期：{{ $u.timeFormat(displayActivity.start_time, 'yyyy年mm月dd日 hh:MM:ss') }}
					</view>
					<view class="mb-5">结束日期：{{ $u.timeFormat(displayActivity.end_time, 'yyyy年mm月dd日 hh:MM:ss') }}</view>
					<view class="mb-5">活动地点：{{ displayActivity.activity_address }}</view>
					<view class="mb-5">活动人数：{{ displayActivity.num_of_people }}</view>
					<view class="mb-5">活动概述：{{ displayActivity.overview }}</view>
					<view class="mb-5">需要签到：{{ displayActivity.signin_require === 0 ? '否' : '是' }}</view>
					<view class="mb-15">已报名人数：{{displayActivity.num_of_participants}}</view>
					<u-button :hairline="false" class="bm-btn" :class="{'disable':disableJoinButton}" :disabled="disableJoinButton" @tap="joinActivity" text="报 名"></u-button>
				</view>
			</Acard>
		</view>
		<!-- 粒子背景 -->
		<ParticleBackground></ParticleBackground>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'ActivityDetail',
	data() {
		return {};
	},
	computed: {
		...mapState('activity', ['displayActivity']),
		disableJoinButton(){
			return this.displayActivity.start_time*1 < Date.now();
		}
	},
	methods:{
		async joinActivity(){
			let code = await this.$store.dispatch('activity/joinActivity',{
				user_id:this.$store.getters.user_id,
				activity_id:this.displayActivity.id,
				creationTime:Date.now()
			})
			if (code === 20098){
				uni.showToast({
					title: '已经报过名了',
					icon:'error',
					duration: 2000
				})
			}
			if (code === 200){
				uni.showToast({
					title: '成功',
					icon:'success',
					duration: 2000,
					success: () => {
						this.displayActivity.num_of_participants +=1
					}
				})
			}
		}
	}
};
</script>

<style scoped lang="scss">
.bm-btn {
	font-weight: 900;
	background-color: #9bd2bd;
	color: #f1f1f1;
	&:active {
		background-color: #82b09e;
	}
	& .disable{
		background-color: #739187;
		&:active{
			background-color: #739187 !important;
		}
	}
}
</style>
